<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解到-传道解惑的架构师博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/blog.css">
</head>
<body>
    <!-- 顶部导航 -->
    <header id="top">
        <nav class="nav">
            <a href="index.html" class="logo">
                <img src="img/jdon100.png">
            </a>
            <ul class="menu">
                <!-- <li class=""><a href="category.html">面向对象</a></li>
                <li><a href="#">设计模式</a></li>
                <li><a href="#">领域驱动设计</a></li>
                <li><a href="#">微服务</a></li>
                <li><a href="#">企业架构</a></li>
                <li><a href="#">编程</a></li>
                <li><a href="#">分布式</a></li>
                <li><a href="#">编程</a></li>
                <li><a href="#">学习教程</a></li> -->
            </ul>
            <ul class="share">
                <li><a href="#"><i class="fa fa-weibo"></i></a></li>
                <li><a href="#"><i class="fa fa-weixin"></i></a></li>
                <li><a href="#"><i class="fa fa-qq"></i></a></li>
            </ul>
        </nav>
    </header>

    <!-- 主体内容 -->
    <div class="container">
        <!-- 左边 -->
        <div class="main_left">
            <ul id="search_li">
                <!-- <li>
                    <h3><a href="detail.html">邮件泄密：比尔·盖茨在1996年因为 Java 失眠了</a></h3>
                    <div class="census">
                        <span><i class="fa fa-calendar"></i>2021-01-12</span>
                        <span><i class="fa fa-eye"></i>68</span>
                        <span><i class="fa fa-heart"></i>10</span>
                        <span><i class="fa fa-user"></i>future</span>
                    </div>
                    <div class="info">
                        <div class="pic">
                            <a href="#">
                                <img src="img/list1.jpg">
                            </a>
                        </div>
                        <p>
                            比尔盖茨：我真的因为 Java 失眠了：1996 年 9 月 30 日： 我很担心Java/Javabeans和他们所做的所有“运行时”的工作有多么伟大，以及这产生了多少兴奋。我简直要为这个问题失,他们所做的所有“运行时”的工作有多么伟大，以及这产生了多少兴奋...
                            <a href="#">详细</a>
                        </p>
                    </div>
                </li> -->
            </ul>
        </div>

        <!-- 搜索模板 -->
        <script id="list_tpl" type="text/html">
            {{if result.length == 0}}
             <li>暂无数据!</li>
            {{/if}}

            {{each result}}
            <li>
                <h3><a href="detail.html?id={{$value.id}}">{{$value.title}}</a></h3>
                <div class="census">
                    <span><i class="fa fa-calendar"></i>{{$value.ctime|dateFormat}}</span>
                    <span><i class="fa fa-eye"></i>{{$value.view}}</span>
                    <span><i class="fa fa-heart"></i>{{$value.like}}</span>
                    <span><i class="fa fa-user"></i>{{$value.username}}</span>
                </div>
                <div class="info">
                    <div class="pic">
                        <a href="detail.html?id={{$value.id}}">
                            <img src="{{$value.pic}}">
                        </a>
                    </div>
                    <p>
                        {{$value.sub_title}}...
                        <a href="detail.html?id={{$value.id}}">详细</a>
                    </p>
                </div>
            </li>
            {{/each}}
        </script>

        <!-- 右边 -->
        <div class="main_right">
            <form action="#" class="search" enctype="">
                <input type="text" placeholder="Enter键进行搜索" id="search">
            </form>

            <div class="ad">
                <a href="#">
                    <img src="img/ad.jpg">
                </a>
            </div>

            <div class="likes">
                <h3>点赞</h3>
                <ul id="like_ul">
                   <!--  <li><a href="#">为什么Web3亮点在于其数据库？</a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？</a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li> -->
                </ul>
            </div>
            <!-- 定义atr-template 模板 -->
            <script type="text/html" id="like_list">
                {{each result}}
                    <li><a href="detail.html?id={{$value.id}}">{{$value.title|sub_str 24}}</a></li>
                {{/each}}
                <!-- <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？</a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li> -->
            </script>

            <div class="likes">
                <h3>最新</h3>
                <ul>
                    <li><a href="#">为什么Web3亮点在于其数据库？</a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？</a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                    <li><a href="#">随着复杂性的增加，层次结构的用处越来越小？ </a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer id="footer">
        <div>
            <a href="#">关注解道</a>|
            <a href="#">关于解道</a>|
            <a href="#">联系解道</a>
        </div>
        <p>Copyright © 2022 ddd.com 沪ICP备120334648号-1</p>
    </footer>

    <script src="js/axios.min.js"></script>
    <script src="js/nav.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/template-web.js"></script>
    <script src="js/index.js"></script>
    <script>
        //搜索:
        //格式化时间
        template.defaults.imports.dateFormat = function(data, format){
            var date = dayjs.unix(data).format("YYYY-MM-DD HH:mm:ss");
            return date;
        }

        var sbt = document.querySelector("#search");
        sbt.onkeyup = async function(e){
            e.stopPropagation();
            e.preventDefault();
            //1.取事件对象
            var e = e || window.event;
            // console.log(e,e.keyCode)

            //2.取值
            var keywords = this.value;

            //enter
            if(e.keyCode == 13){
                 //3.发请求
                var res = await axios.post("/article/search",{keywords});
                // console.log(res)

                //4.渲染数据
                var data = res.data ||[];
                //模板引擎渲染引擎
                //1.定义模板(index.html))
                //2.使用template 编译模板
                if(data){
                    var page_data = {
                        result:data.result
                    }
                    var li = template('list_tpl',page_data);//获取模板，编译成字符串
                    //3.生成内容
                    document.querySelector("#search_li").innerHTML = li;
                }
            }

        }
    </script>
</body>
</html>